<template>
	<div class="search-list">
		<div class="header">
			<Header></Header>
			<ul class="tab">
				<li>综合</li>
				<li>销量</li>
				<li>新品</li>
				<li>价格<i style="color: #999;" class="fas fa-caret-down" /></li>
			</ul>
		</div>
		<Lists></Lists>
	</div>
</template>

<script setup>
	import Header from '@/components/search/Header.vue'
	import Lists from '@/components/Search/Lists.vue'
</script>

<style scoped>
	.tab {
		display: flex;
		justify-content: space-evenly;
		font-size: 16px;
		background-color: white;
		padding: 5px 10px;
		border-bottom: 1px solid #ccc;
	}

	.tab li {
		border-right: 1px solid #ccc;
		flex: 0 0 25%;
		text-align: center;
	}

	.tab li:last-child {
		border-right: 0;
	}
</style>